<template>
    <div class="app-container">
        <div class="block">
            <el-row :gutter="20">
                <el-col :span="4">
                    <el-input v-model="listQuery.criteria.deviceName" size="mini" placeholder="请输入设备名称"></el-input>
                </el-col>
                <el-col :span="4">
                    <el-input v-model="listQuery.criteria.deviceNum" size="mini" placeholder="请输入设备编号"></el-input>
                </el-col>
                <el-col :span="4">
                    <el-select v-model="listQuery.criteria.deviceType" placeholder="设备类型" size="mini">
                        <el-option label="全部设备" value="">
                        </el-option>
                        <el-option v-for="item in dictTypeList" :key="item.code" :label="item.name" :value="item.code">
                        </el-option>
                    </el-select>
                </el-col>
                <el-col :span="4">
                    <el-select v-model="listQuery.criteria.warehouseId" placeholder="所属仓库" size="mini">
                        <el-option label="全部仓库" value="">
                        </el-option>
                        <el-option v-for="item in storeHouseList" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                </el-col>
                <el-col :span="6">
                    <el-button type="success" size="mini" icon="el-icon-search" @click.native="search">搜索</el-button>
                    <el-button type="primary" size="mini" icon="el-icon-refresh" @click.native="reset">重置</el-button>
                </el-col>
            </el-row>
            <br>
            <el-row>
                <el-col :span="24">
                    <el-button type="success" size="mini" icon="el-icon-plus" @click.native="add">添加</el-button>
                    <el-button type="primary" size="mini" icon="el-icon-edit" @click.native="edit">修改</el-button>
                    <el-button type="danger" size="mini" icon="el-icon-delete" @click.native="remove">删除</el-button>
                </el-col>
            </el-row>
        </div>

        <el-table :data="list" v-loading="listLoading" element-loading-text="Loading" border fit highlight-current-row
            @current-change="handleCurrentChange">

            <el-table-column label="设备编码">
                <template slot-scope="scope">
                    {{ scope.row.deviceNum }}
                </template>
            </el-table-column>

            <el-table-column label="设备名称">
                <template slot-scope="scope">
                    {{ scope.row.deviceName }}
                </template>
            </el-table-column>

            <el-table-column label="设备类型">
                <template slot-scope="scope">
                    {{ scope.row.deviceTypeName }}
                </template>
            </el-table-column>
            <el-table-column label="所属仓库">
                <template slot-scope="scope">
                    {{ scope.row.warehouseName }}
                </template>
            </el-table-column>

            <el-table-column label="设备范围">
                <template slot-scope="scope">
                    下限：{{ scope.row.lowerThreshold }}{{ scope.row.unitName }} <br>
                    上限：{{ scope.row.upperThreshold }}{{ scope.row.unitName }}
                </template>
            </el-table-column>

            <el-table-column label="状态">
                <template slot-scope="scope">
                    <el-switch v-model="scope.row.status == 0" @change="changeStatus(scope.row.id)"></el-switch>
                </template>
            </el-table-column>

            <el-table-column label="排序">
                <template slot-scope="scope">
                    {{ scope.row.num }}
                </template>
            </el-table-column>


            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button type="text" size="mini" icon="el-icon-edit"
                        @click.native="editItem(scope.row)">修改</el-button>
                    <el-button type="text" size="mini" icon="el-icon-delete"
                        @click.native="removeItem(scope.row)">删除</el-button>
                    <el-button type="text" size="mini" icon="el-icon-tickets"
                        @click.native="openLife(scope.row.id)">设备记录</el-button>
                </template>
            </el-table-column>

        </el-table>


        <el-pagination background layout="total, sizes, prev, pager, next, jumper" :page-sizes="[10, 20, 50, 100, 500]"
            :page-size="listQuery.size" :total="total" :current-page.sync="listQuery.current" @size-change="changeSize"
            @current-change="fetchPage" @prev-click="fetchPrev" @next-click="fetchNext">
        </el-pagination>

        <el-dialog :title="formTitle" :visible.sync="formVisible" width="70%">
            <el-form ref="form" :model="form" :rules="rules" label-width="80px">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="设备编号" prop="deviceNum">
                            <el-input v-model="form.deviceNum" minlength=1></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="设备名称" prop="deviceName">
                            <el-input v-model="form.deviceName" minlength=1></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="12">

                        <el-form-item label="设备类型" prop="deviceType">
                            <el-select v-model="form.deviceType" placeholder="请选择" @change="changeValue">
                                <el-option v-for="item in dictTypeList" :key="item.code" :label="item.name"
                                    :value="item.code">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>

                    <el-col :span="12">

                        <el-form-item label="所属仓库" prop="warehouseId">
                            <el-select v-model="form.warehouseId" placeholder="请选择">
                                <el-option v-for="item in storeHouseList" :key="item.id" :label="item.name"
                                    :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>

                    <el-col :span="12">
                        <el-form-item label="下限阈值">
                            <el-input v-model="form.lowerThreshold" type="number"> <i slot="suffix"
                                    style="font-style:normal;margin-right: 10px; line-height: 30px; color: #1e1e1e">{{
                                    unit
                                    }}</i></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="12">
                        <el-form-item label="上限阈值">
                            <el-input v-model="form.upperThreshold" type="number"> <i slot="suffix"
                                    style="font-style:normal;margin-right: 10px; line-height: 30px; color: #1e1e1e">{{
                                    unit
                                    }}</i></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="12">
                        <el-form-item label="备注">
                            <el-input v-model="form.remark" type="text"></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="12">
                        <el-form-item label="排序">
                            <el-input v-model="form.num" type="number"></el-input>
                        </el-form-item>
                    </el-col>


                </el-row>
                <el-form-item>
                    <el-button type="primary" @click="save">保存</el-button>
                    <el-button @click.native="formVisible = false">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>

        <el-dialog title="设备记录" :visible.sync="recordVisible" width="70%">
            <div class="block">
                <el-row :gutter="24">
                    <el-col :span="4">
                        <el-date-picker type="date" size="mini" placeholder="起始日期" v-model="listLifeQuery.beginTime"
                            value-format="yyyy-MM-dd" style="width: 100%;"></el-date-picker>
                    </el-col>
                    <el-col :span="4">
                        <el-date-picker type="date" size="mini" placeholder="结束日期" v-model="listLifeQuery.endTime"
                            value-format="yyyy-MM-dd" style="width: 100%;"></el-date-picker>
                    </el-col>
                    <el-col :span="4">
                        <el-select v-model="listLifeQuery.criteria.status" placeholder="设备状态" size="mini"
                            style="width: 100%;">
                            <el-option label="过低" value="-1"></el-option>
                            <el-option label="正常" value="0"></el-option>
                            <el-option label="过高" value="1"></el-option>
                        </el-select>
                    </el-col>
                    <el-col :span="8">
                        <el-button type="success" size="mini" icon="el-icon-search"
                            @click.native="searchLife">搜索</el-button>
                        <el-button type="primary" size="mini" icon="el-icon-refresh"
                            @click.native="resetLife">重置</el-button>
                        <el-button type="danger" size="mini" icon="el-icon-delete" @click.native="clearlife()">清空</el-button>
                    </el-col>
                </el-row>
                <br>
                <el-row>
            <el-col :span="20">
                <el-table :data="listLife" v-loading="listLifeLoading" element-loading-text="Loading" 
                    highlight-current-row @current-change="handleCurrentChange">
                   
                    <el-table-column label="记录时间">
                        <template slot-scope="scope">
                    {{formatDate( scope.row.recordTime )}}
                </template>
                    </el-table-column>

                    <el-table-column label="记录数值">
                        <template slot-scope="scope">
                    {{scope.row.deviceNum }}
                </template>
                    </el-table-column>


                    <el-table-column label="设备状态">
                        <template slot-scope="scope">
                            <el-tag type="success" v-if="scope.row.status == 0">正常</el-tag>
                            <el-tag type="warning" v-if="scope.row.status == -1">过低</el-tag>
                            <el-tag type="danger" v-if="scope.row.status == 1">过高</el-tag>
                </template>
                    </el-table-column>
                </el-table>

                <el-pagination background layout="total, sizes, prev, pager, next, jumper"
                    :page-sizes="[10, 20, 50, 100, 500]" :page-size="listLifeQuery.size" :total="totalLife"
                    :current-page.sync="listLifeQuery.current" @size-change="changeLifeSize" @current-change="fetchLifePage"
                    @prev-click="fetchLifePrev" @next-click="fetchLifeNext">
                </el-pagination>

            </el-col>
        </el-row>
            </div>
        </el-dialog>

    </div>
</template>



<script src="./device.js"></script>
<style rel="stylesheet/scss" lang="scss" scoped>
@import "src/styles/common.scss";
</style>